// 第一步获取所需要的dom节点
const fill = document.querySelector(".fill");
const emptyes = document.querySelectorAll(".empty");

// 第二步给fill添加事件监听
// fill拖动时触发
fill.addEventListener("dragstart",dragStart);
// fill终止时触发
fill.addEventListener("dragend",dragEnd);

// 第四步，循环empty盒子并设置事件监听
for(const empty of emptyes){
    empty.addEventListener("dragover",dragOver);
    empty.addEventListener("dragenter",dragEnter);
    empty.addEventListener("dragleave",dragLeaver);
    empty.addEventListener("drop",dragDrop);
}


// 第三步fill拖动函数
function dragStart(){
    this.className += " hold";
    // 当拖拽起来的时候设置类名（图片）不可见
    setTimeout(()=>(this.className = "invisible"),0)
    // this.className = "invisible"
}
function dragEnd(){
    // 当放下图片的时候设置类名可见
    this.className = "fill"
}

// 第五步，empty函数 
// 指当拖动的对象在容器范围内移动的时候
function dragOver(e){
    // 阻止默认事件
    e.preventDefault(e);
}
// 指当被拖动的对象进入容器范围内的时候触发
function dragEnter(e){
    e.preventDefault(e);
    this.className += " hoverred"

}
// 指当被拖动的对象离开这个容器范围的时候触发
function dragLeaver(){
    this.className += "empty"
}
// 在拖动过程中释放鼠标的时候触发,这里要阻止默认事件
function dragDrop(){
    this.className += "empty"
    this.append(fill)
}

